<template>
    <div class="platform">
        <my-tag title="设计师审核" :showSortImg="false"></my-tag>
        <div class="platform-box">
            <el-form ref="designerRef" :rules="rules" :model="detailPlannerForm" label-width="auto"
                label-position="left" class="demo-ruleForm platform-formList">
                <div class="form-left">
                    <el-form-item label="设计师昵称" prop="designerName">{{ detailPlannerForm.designerName }}</el-form-item>
                    <el-form-item label="设计机构" prop="company">{{ detailPlannerForm.company }}</el-form-item>
                    <!-- <el-form-item label="性别" prop="sex">{{ detailPlannerForm.sex === 0 ? '男' : '女' }}</el-form-item> -->
                    <el-form-item label="工作年限：" prop="workYears">{{ detailPlannerForm.workYears }}</el-form-item>
                    <el-form-item label="授权手机号" prop="tel">{{ detailPlannerForm.tel }}</el-form-item>
                    <el-form-item label="职位" prop="position">{{ detailPlannerForm.position }}</el-form-item>
                    <el-form-item label="个人简介" prop="personalProfile" style="width:80%;min-width:400px;">{{
            detailPlannerForm.personalProfile || '暂无个人简介' }}</el-form-item>

                    <el-form-item label="所获荣誉" prop="honers" style="width:80%;min-width:400px;">
                        <div>{{ detailPlannerForm.honers || '暂无荣誉' }}</div>
                    </el-form-item>
                    <el-form-item label="点赞量" prop="likes">
                        <div>{{ detailPlannerForm.likes }}</div>
                    </el-form-item>
                    <el-form-item label="访问量" prop="visits">
                        <div>{{ detailPlannerForm.visits }}</div>
                    </el-form-item>
                </div>
                <div class="form-right">
                    <el-form-item label="头像" prop="url">
                        <ImagePreview :width="100" :height="100" :src="detailPlannerForm.url"
                            :preview-src-list="[detailPlannerForm.url]" />
                    </el-form-item>
                    <el-form-item label="形象照" prop="coverImageUrl">
                        <ImagePreview :width="100" :height="100" :src="detailPlannerForm.coverImageUrl"
                            :preview-src-list="[detailPlannerForm.coverImageUrl]" />
                    </el-form-item>
                    <el-form-item label="名片背景" prop="hairstyleImage">
                        <ImagePreview :width="100" :height="100" :src="detailPlannerForm.hairstyleImage"
                            :preview-src-list="[detailPlannerForm.hairstyleImage]" />
                        <!-- <image-upload v-if="form.hairstyle" v-model="form.hairstyle" :limit="1"></image-upload> -->
                    </el-form-item>
                    <el-form-item label="荣誉证书" prop="honersImage">
                        <ImagePreview v-for="(v, i) in detailPlannerForm.honersImage" :key="i" :width="100"
                            :height="100" :src="v.url" :preview-src-list="[v.url]" style="margin-right:10px;" />
                    </el-form-item>
                    <el-form-item label="入驻时间" prop="createTime">{{ detailPlannerForm.createTime }}</el-form-item>
                    <el-form-item label="审核：" prop="designerStatus" style="width:40%;min-width:400px;">
                        <el-select v-model="detailPlannerForm.designerStatus" placeholder="请选择" size="large">
                            <el-option label="通过" :value="1" />
                            <el-option label="未通过" :value="2" />
                            <el-option label="已下架" :value="3" :disabled="detailPlannerForm.rootId" />
                            <el-option label="待审核" :value="0" disabled />
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="detailPlannerForm.designerStatus === 2" label="未通过原因：" prop="remark"
                        style="width:60%;min-width:400px;">
                        <el-input type="textarea" :autosize="{ minRows: 3 }" v-model="detailPlannerForm.remark"
                            @focus="remarkLimit = true" @blur="remarkLimit = false" :show-word-limit="remarkLimit"
                            maxlength="100" placeholder="请输入未通过原因" />
                    </el-form-item>
                </div>
            </el-form>

        </div>
        <div class="platform-submit-btn">
            <div class="dialog-footer">
                <el-button type="primary" size="small" @click="submitForm">提 交</el-button>
                <el-button @click="cancel" size="small">返 回</el-button>
            </div>
        </div>
    </div>
</template>
<script setup>
import { getDesigner, updateDesigner, getImgUrl } from "@/api/decor/designer";
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const activeNames = ref(['1'])
let remarkLimit = ref(false)
const data = reactive({
    detailPlannerForm: {},
    rules: {
        designerStatus: [{ required: true, message: "请选择审核状态", trigger: "blur" }],
        remark: [{ required: true, message: "未通过原因不能为空", trigger: "blur" }]
    },
});
const { detailPlannerForm, rules } = toRefs(data);
// 获取设计师详情信息
(() => {
    const designerId = route.params.designerId
    if (designerId) {
        getDesigner(designerId).then((res) => {
            let designerData = res.data;
            designerData.url = '';
            designerData.coverImageUrl = '';
            designerData.honersImage = '';
            designerData.hairstyleImage = '';
            let imgUrlPromises = [];
            // 获取头像的异步操作
            if (designerData.avatarId) {
                let avatarPromise = getImgUrl(designerData.avatarId).then((res) => {
                    designerData.url = res.data[0].url;
                });
                imgUrlPromises.push(avatarPromise);
            }
            if (designerData.hairstyle) {
                let hairstylePromise = getImgUrl(designerData.hairstyle).then((res) => {
                    designerData.hairstyleImage = res.data[0].url;
                });
                imgUrlPromises.push(hairstylePromise);
            }
            if (designerData.honersImgs) {
                let honersImages = getImgUrl(designerData.honersImgs).then((res) => {
                    designerData.honersImage = res.data;
                });
                imgUrlPromises.push(honersImages);
            }
            // 获取封面图片的异步操作
            if (designerData.coverImage) {
                let coverImagePromise = getImgUrl(designerData.coverImage).then((res) => {
                    designerData.coverImageUrl = res.data[0].url;
                });
                imgUrlPromises.push(coverImagePromise);
            }
            // 等待所有的异步操作完成
            Promise.all(imgUrlPromises).then(() => {
                // 所有的异步操作完成后再更新 detailPlannerForm.value
                detailPlannerForm.value = designerData;
            });
        })
    }

})()

const submitForm = () => {
    proxy.$refs["designerRef"].validate(valid => {
        if (valid) {
            proxy.$modal.confirm('是否确认提交当前操作？').then(function () {
                return updateDesigner(detailPlannerForm.value);
            }).then(() => {
                proxy.$modal.msgSuccess("提交成功");
                router.go(-1)
            }).catch(() => { });
        } else {
            proxy.$modal.msgError('请根据提示完善必填信息')
        }
    });
}
// 返回
const cancel = () => {
    router.go(-1)
}
</script>